<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.augmentum.login.Constants"%>
<%@ page import="java.util.ArrayList"%>
<%@ page import="java.util.List"%>
<%@ page import="java.util.Map"%>
<%@ page import="com.augmentum.login.exception.*"%>
<%@ page import="com.augmentum.login.model.Question"%>
<%@ page import="com.augmentum.login.util.Prop"%>
<script type="text/javascript">
    $(document).ready(function(){
        $("textarea[name='description']").bind({
            blur:function() {
                var obj = $(this).parent().next();
                if (!reg['noneempty02'].test($(this).val())) {
                   $(obj).css('color','#FF3333');
                   $(obj).text("Data length is error!");
               } else {
                   $(obj).css('color','#00CED1');
                   $(obj).text("It's ok!");
               }
            }
        });

        $("input[type='reset']").click(function(){
            $("#validate").html("");
            $("#validate0").html("");
            $("#validate1").html("");
            $("#validate2").html("");
            $("#validate3").html("");
            $("#validate4").html("");
        });

         $("input[id='option']").bind( {
           blur:function(){
               var obj = $(this).parent().next();
               if (!reg['noneempty01'].test($(this).val())) {
                   $(obj).css('color','#FF3333');
                   $(obj).text("data length is error!");
               } else {
               $(obj).css('color','#00CED1');
               $(obj).html("It's ok!");
               }
           }
       });

        $("input[name='questionId']").bind( {
            blur:function(){
                var obj = $(this).parent().next();
                if (!reg['id'].test($(this).val())) {
                    $(obj).html("Data format is error!");
                    $(obj).css('color','#FF3333');
                } else {
                    $(obj).css('color','#00CED1');
                    $(obj).html("It's ok!");
                }
            }
        });

    $("#submitId").click(function() {
        var id = $("input[name='questionId']").val();
        var desc = $("textarea[name='description']").val();
        var a = $("input[name='optionA']").val();
        var b = $("input[name='optionB']").val();
        var c = $("input[name='optionC']").val();
        var d = $("input[name='optionD']").val();
        var answer = getEditAnswer($("input:radio"), a, b, c, d);
           if (id && desc && a && b && c && d && answer) {
            $("#addForm").submit();
         } else {
             alert("Some fields cannot be empty!");
         }
    });
});
</script>
  <% String basePath = request.getContextPath();
      Object obj = request.getSession().getAttribute(Constants.QUESTION_PARAM_MSG);
      String id = "";
      String desc = "";
      String ae = "";
      String ce = "";
      String be = "";
      String de = "";
     if (obj instanceof Map) {
         Map<String, String> paramMap = (Map<String, String>) obj;
          id = paramMap.get(Constants.QUESTION_ID_EXCEPTION);
          desc = paramMap.get(Constants.DESCRIPTION_EXCEPTION);
          ae = paramMap.get(Constants.OPTION_A_EXCEPTION);
          be = paramMap.get(Constants.OPTION_B_EXCEPTION);
          ce = paramMap.get(Constants.OPTION_C_EXCEPTION);
          de = paramMap.get(Constants.OPTION_D_EXCEPTION);
     }
     String msg = (String)session.getAttribute(Constants.QUESTION_SERVICE_MSG);
  %>
<div id="bottomId" class="common border-style ">
  <div style="width: 20%;" class="common float-left common-height">
    <div class="common common-width">
      <span class="layout-center style-span"></span>
    </div>
    <div class="common common-width">
      <span onclick="getClick('<%=basePath%>/page/question/search')"
        class="cursor font-style03 color-style01 layout-center style-span">Question List</span>
    </div>
    <div class="common common-width">
      <span onclick="getClick('<%=basePath%>/page/question/createPage')"
        class="cursor bg-color01 font-style03 color-style03 layout-center style-span">Create Question</span>
      <hr class="hr-style color-style01" />
    </div>
  </div>
  <hr class="float-left common-height" style="widht: 1%; color: #9D9D9D;" />
  <!--Right-->
  <div id="iframeId" style="width: 79%;" class="common common-height float-left">
    <div class="common float-left" style="width: 20%; height: 400px;"></div>
    <div class="common float-left " style="width: 60%;">
      <form name="addForm" id="addForm" action="<%=basePath%>/page/question/create" method="post">
        <table class="font-style03 color-style04 common common-width layout-center" height=350px;>
          <tr>
            <td id="validate" colspan="3" style="color:red;font-size:8pt"><%= msg == null ? "" : msg%></td>
          </tr>
          <tr>
            <td>Question ID</td>
            <td><input placeholder="6-20 letter+digital" type="text" style="width:60%;float:left" id="questionId" name="questionId" /></td>
            <td id="validate0" style="color:red;font-size:8pt" ><%= id == null ? "" : id%></td>
          </tr>
          <tr>
            <td>Question</td>
            <td><textarea placeholder="please input description" class="color-style01 radius3 set-size"
                style="width: 95%; height: 100%" name="description"></textarea></td>
            <td width="150px" style="color:red;font-size:8pt" id="validate1"><%= desc == null ? "" : desc%></td>
          </tr>
          <tr>
            <td>Question answer</td>
            <td colspan=2>
              <table class="color-style01 radius3 common-length">
                <tr>
                  <td><input type="radio" name="answer" id="A" value="" /><label>A</label><input id="option"
                    placeholder= "1-200 characters" class="input-width" name="optionA" type="text" /></td>
                  <td width="180px" style="color:red;font-size:8pt" id="validate2"><%= ae == null ? "" : ae%></td>
                </tr>
                <tr>
                  <td><input type="radio" name="answer" id="B" value="" /><label>B</label><input id="option"
                    placeholder= "1-200 characters" class="input-width" name="optionB" type="text" /></td>
                  <td style="color:red;font-size:8pt" id="validate3"><%= be == null ? "" : be%></td>
                </tr>
                <tr>
                  <td><input type="radio" name="answer" id="C" value="" /><label>C</label><input id="option"
                    placeholder= "1-200 characters" class="input-width" name="optionC" type="text" /></td>
                  <td style="color:red;font-size:8pt" id="validate4"><%= ce == null ? "" : ce%></td>
                </tr>
                <tr>
                  <td><input type="radio" name="answer" id="D" value="" /><label>D</label><input id="option"
                    placeholder= "1-200 characters" class="input-width" name="optionD" type="text" /></td>
                  <td style="color:red;font-size:8pt" id="validate5"><%= de == null ? "" : de%></td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td colspan="3" height=40px;>
              <table class="common-length">
                <tr>
                  <td width="15%"></td>
                  <td width="15%"></td>
                  <td width="20%"><input id="submitId" type="button" value="Save"
                    class="color-style03 cursor layout-center common-length bg-color02" /></td>
                  <td width="20%"><input type="reset" value="clean"
                    class="color-style03 cursor layout-center common-length bg-color02" /></td>
                  <td width="15%"></td>
                  <td width="15%"></td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </form>
    </div>
    <% session.removeAttribute(Constants.QUESTION_SERVICE_MSG);
       session.removeAttribute(Constants.QUESTION_PARAM_MSG);%>
    <div class="common float-left " style="width: 20%;"></div>
  </div>
</div>
<script>
  $("#bottomId").height($("body").height()-$("#topId").height());
</script>